<template>
    <orh-table add="attendanceManage_add" pages :pageDate="pageDate" @on-add="addSilde" @on-page-change="grade" del="attendanceManage_del" @on-del="prompt = true" reload @on-reload="refresh">
        <!-- <Cascader  slot="option" style="width:20%" v-model="yearmodel"  change-on-select :data="yearlist" :load-data="loadData" @on-change="xuelistInfo">
                        </Cascader> -->
        <Table :columns="columns1" @on-selection-change="selectOne" :loading="tableload" :data="GradeList" slot="table"></Table>
        <Modal v-model="prompt" title="数据删除" :loading="loading" @on-ok="asyncOK" slot="others">
            <p>{{ cont }}</p>
        </Modal>
        <orh-sidebar v-model="show" :title="pageTitle" scale slot="others">
            <component :is='which_to_show' :infoId='infoId' @showParent='showParent=>show=showParent' @backList='backList'></component>
        </orh-sidebar>
    </orh-table>
</template>

<script>
      import Vue from 'vue'
      export default {
          components: {
              AttendanceManageAdd: resolve => {
                  require(['./AttendanceManageAdd.vue'], resolve);
              },
              AttendanceManageEdit: resolve => {
                  require(['./AttendanceManageEdit.vue'], resolve);
              },
    
          },
          data() {
              return {
                  listUrl: 'api/teacher/v3/attendance_management/list?page=',
                  delUrl: 'api/teacher/v3/attendance_management/del/',
                  pageDate: {
                      total: null,
                      current_page: 1,
                      per_page: 1
                  },
                  yearmodel: '',
                  yearlist: [], //学年数据
                  pageTitle: null, //右边页面的title
                  tableload: true, //表格加载动画
                  prompt: false, //批量删除的弹框
                  loading: true,
                  cont: '您确定要删除这些数据吗',
                  del: [], //删除
    
                  show: false,
    
                  which_to_show: "", //判断修改或添加组件显示与否
                  GradeList: [], //年级变量
                  infoId: null, //用于向修改页面传id值
                  columns1: [{
                          type: 'selection',
                          width: 60,
                          align: 'center',
                          fixed: 'left'
                      },
                      {
                          title: '标题',
                          // key: 'grade_order',
                          render: (h, params) => {
                              let name = params.row.title.zh ? params.row.title.zh : params.row.title.mn
                              return h('div', name)
                          }
                      },
                      {
                          title: '操作',
                          key: 'action',
                          width: 150,
                          align: 'center',
                          fixed: 'right',
                          render: (h, params) => {
                              return h('div', [
                                  h('Button', {
                                      directives: [{
                                          name: 'button',
                                          value: {
                                              Route: this.$route,
                                              ButtonName: 'attendanceManage_edit'
                                          },
                                      }],
                                      props: {
                                          type: 'primary',
                                          size: 'small'
                                      },
                                      style: {
                                          marginRight: '5px',
                                      },
                                      on: {
                                          click: () => {
                                              this.update(params.index)
                                          }
                                      }
                                  }, '编辑'),
                                  h('Poptip', {
                                      props: {
                                          confirm: true,
                                          title: '您确定要删除这条数据吗?',
                                          transfer: true,
                                          type: 'primary',
                                          size: 'small',
                                          placement: 'left'
                                      },
                                      style: {
                                          marginRight: '5px',
                                      },
                                      on: {
                                          'on-ok': () => {
                                              this.remove(this.GradeList[params.index].id)
                                          }
                                      }
                                  }, [
                                      h('Button', {
                                          directives: [{
                                              name: 'button',
                                              value: {
                                                  Route: this.$route,
                                                  ButtonName: 'attendanceManage_del'
                                              },
                                          }],
                                          style: {
                                              marginRight: '5px',
                                          },
                                          props: {
                                              type: 'error',
                                              size: 'small'
                                          }
                                      }, '删除')
                                  ]),
                              ]);
                          }
                      }
    
                  ],
              }
          },
          methods: {
              // 获取年级的数据
              grade(index) {
                  this.tableload = true
                  this.$http.get(this.listUrl + index).then(val => {
                      this.GradeList = val.data
                      this.pageDate.total = val.pages.total
                      this.pageDate.per_page = val.pages.per_page
                      this.pageDate.current_page = val.pages.current_page
                      this.tableload = false
                  }, err => console.log(err))
              },
              // 点击添加按钮是
              addSilde() {
                  this.show = true
                  this.pageTitle = '添加'
                  this.which_to_show = 'AttendanceManageAdd';
                  // this.$emit('backList','AttendanceManageAdd')
              },
              // 点击编辑时向子组件传数据
              update(index) {
                  this.infoId = `${this.GradeList[index].id}`
                  this.show = true
                  this.pageTitle = '修改'
                  this.which_to_show = 'AttendanceManageEdit';
                  // this.$emit('backList','LifetimeEntranceGuardEdit')
                  // this.$emit('infoIdstr',this.infoId)
    
              },
              // 修改返回数据更新
              backList(val) {
                  if (val == true) {
                      this.grade(this.pageDate.current_page);
                  }
              },
              // ==================================================
              // 单条删除
              // ==================================================
              remove(index) {
                  this.del = []
                  this.del.push(index)
                  this.asyncOK()
              },
    
              // ==================================================
              // 批量删除
              // ==================================================
              selectOne(index) {
                  this.del = []
                  index.forEach(item => {
                      this.del.push(item.id)
                  });
              },
              // ==================================================
              // 执行删除操作
              // ==================================================
              asyncOK() {
                  if (this.del.length == 0) {
                      this.$Message.info('请选择删除项');
                      this.prompt = false;
                      return
                  }
                  this.del = JSON.stringify(this.del)
                  this.$http.delete(this.delUrl + this.del).then(val => {
                      if (val.code == '200') {
    
                          this.prompt = false;
                          this.grade(this.pageDate.current_page)
                      }
                  }, err => console.log(err))
              },
    
              // ==================================================
              // 刷新数据（当前分页）
              // ==================================================
              refresh() {
                  this.tableload = true
                  this.grade(this.pageDate.current_page)
              },
    
          },
          mounted() {
              this.grade(this.pageDate.current_page);
              // this.load()
          },
      }
</script>